<template>
    <div>
        <header class="resviseTop">
            <span class="resvise_title">登录</span>
        </header>
        <div class="logo_img">
            <img src="../../img_myself/logo.png" alt="" />
        </div>
        <div class="W_80">
            <div class="flex_login">
                <img src="../../img_myself/account.png" alt="" />
                <input
                    type="text"
                    placeholder="请输入账号"
                    v-model="task.user_mobile"
                />
                <img
                    src="../../img_myself/close.png"
                    alt=""
                    @click="removeHTml(1)"
                />
            </div>
            <div class="flex_login">
                <img src="../../img_myself/password.png" alt="" />
                <input
                    type="password"
                    placeholder="请输入密码"
                    v-model="task.user_password"
                />
                <img
                    src="../../img_myself/close.png"
                    alt=""
                    @click="removeHTml(2)"
                />
            </div>
        </div>
        <div style="padding: 0 .4rem">
            <div class="login_btn" @click="userLogin">登录</div>

            <div class="bottom_infor">
                <div>
                    <p>还没账号？</p>
                    <router-link to="/task/reg">立即注册</router-link>
                </div>
                <div>
                    <router-link to="/task/Forget">忘记密码</router-link>
                    <!-- <span @click="forgetPwd()">忘记密码</span> -->
                </div>
            </div>
            <p style="margin-top: 1rem;color: #666;text-align: center">
                1.0老用户默认登陆密码为手机号后六位
            </p>
        </div>
    </div>
</template>

<script>
import api from "../../utils/api";
import { MessageBox } from "mint-ui";
export default {
    name: "Login",
    data: () => ({
        task: {
            user_mobile: "",
            user_password: ""
        }
    }),
    methods: {
        removeHTml: function(inx) {
            if (inx == 1) {
                this.task.user_mobile = "";
            } else {
                this.task.user_password = "";
            }
        },
        userLogin() {
            var that = this;
            api.request("/authorizations", "post", this.task).then(resp => {
                localStorage.setItem("token", resp.data.data.access_token);
                that.$router.push({ path: "/" });
            });
        },
        forgetPwd() {
            MessageBox.confirm("请联系客服qq:2234507798,修改密码");
        }
    }
};
</script>

<style scoped="css">
.logo_img {
    width: 100%;
    height: 6rem;
    display: flex;
}

.logo_img img {
    width: 2.5rem;
    margin: auto;
}

.W_80 {
    width: 80vw;
    margin: 0 auto;
    margin-top: 0.1rem;
}

::-webkit-input-placeholder {
    color: #555;
}

.flex_login img:first-of-type {
    width: 8vw;
    margin-right: 3vw;
}

.flex_login {
    display: flex;
    align-items: center;
    border-bottom: 0.3vw solid #e6e6e6;
    position: relative;
    padding-bottom: 1vw;
}

.flex_login img:last-of-type {
    width: 5vw;
    position: absolute;
    right: 0;
}

.flex_login input {
    height: 10vw;
    font-size: 4.3vw;
    padding-left: 2vw;
    border: 0;
}

.flex_login:nth-of-type(2) {
    margin-top: 0.4rem;
}

.login_btn {
    width: 100%;
    text-align: center;
    height: 1.3rem;
    line-height: 1.3rem;
    -webkit-border-radius: 1.5vw;
    -moz-border-radius: 1.5vw;
    border-radius: 1.5vw;
    color: #fff;
    font-size: 4.2vw;
    margin-top: 0.8rem;
}

.bottom_infor {
    margin-top: 0.5rem;
    font-size: 3.5vw;
}
.bottom_infor p {
    color: #565656;
}
.bottom_infor a {
    color: #f5c056;
}

.bottom_infor > div:last-of-type a {
    color: #da7883;
}

.bottom_infor,
.bottom_infor > div:first-of-type {
    display: flex;
    justify-content: space-between;
}
</style>
